<template>
  <el-card>
    <div class="top-search">
      <!-- <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="采矿权" name="first"> -->
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <!-- <el-form-item label="公告类型">
          <el-radio-group v-model="formInline.radio2">
            <el-radio-button label="挂牌公告" />
            <el-radio-button label="拍卖公告" />
            <el-radio-button label="补充公告" />
          </el-radio-group>
        </el-form-item> -->
        <el-form-item label="登录名">
          <el-input v-model="formInline.user" placeholder="请输入登录名" />
        </el-form-item>
        <el-form-item label="统一社会信用代码">
          <el-input
            v-model="formInline.user"
            placeholder="请输入统一社会信用代码"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">搜索</el-button>
          <el-button @click="reset">重置</el-button>
        </el-form-item>
      </el-form>
      <!-- </el-tab-pane>
        <el-tab-pane label="探矿权" name="second">Config</el-tab-pane>
      </el-tabs> -->
    </div>
  </el-card>
  <el-card>
    <div class="btn-list">
      <!-- <el-button type="primary" @click="cliAdd">新增</el-button> -->
    </div>

    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
      <el-tab-pane label="待审核" name="second">
        <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" fixed />
          <el-table-column
            prop="date"
            label="登录名"
            width="150"
            align="center"
            fixed
          />
          <el-table-column
            prop="name"
            label="用户名"
            width="150"
            align="center"
            fixed
          />
          <el-table-column
            prop="address"
            label="统一社会信用代码"
            width="150"
            align="center"
          />
          <el-table-column
            prop="address"
            label="联系电话"
            width="150"
            align="center"
          />
          <el-table-column
            prop="address"
            label="密码"
            width="150"
            align="center"
          />
          <el-table-column
            prop="address"
            label="邮箱"
            width="150"
            align="center"
          />
          <el-table-column
            prop="address"
            label="联系地址"
            width="150"
            align="center"
          />
          <!-- <el-table-column prop="address" label="发布时间" align="center" /> -->
          <!-- <el-table-column label="状态" width="150" align="center">
            <template #default="scope">
              <el-tag class="ml-2" type="warning">待审核</el-tag>
            </template>
          </el-table-column> -->
          <el-table-column
            prop="date"
            label="提交时间"
            width="150"
            align="center"
          />

          <el-table-column label="操作" align="center" width="150">
            <template #default="scope">
              <div class="btn">
                <el-button type="primary" @click="cliSelect">查看</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="审核通过" name="first">
        <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" fixed />
          <el-table-column
            prop="date"
            label="登录名"
            width="150"
            align="center"
            fixed
          />
          <el-table-column
            prop="name"
            label="用户名"
            width="150"
            align="center"
            fixed
          />
          <el-table-column
            prop="address"
            label="统一社会信用代码"
            width="150"
            align="center"
          />
          <el-table-column
            prop="address"
            label="联系电话"
            width="150"
            align="center"
          />
          <el-table-column
            prop="address"
            label="密码"
            width="150"
            align="center"
          />
          <el-table-column
            prop="address"
            label="邮箱"
            width="150"
            align="center"
          />
          <el-table-column
            prop="address"
            label="联系地址"
            width="150"
            align="center"
          />
          <!-- <el-table-column prop="address" label="发布时间" align="center" /> -->
          <!-- <el-table-column label="状态" width="150" align="center">
            <template #default="scope">
              <el-tag class="ml-2" type="success">审核通过</el-tag>
            </template>
          </el-table-column> -->
          <el-table-column
            prop="date"
            label="提交时间"
            width="150"
            align="center"
          />
          <el-table-column
            prop="date"
            label="审核时间"
            width="150"
            align="center"
          />
          <el-table-column label="操作" align="center" width="150">
            <template #default="scope">
              <div class="btn">
                <el-button type="primary" @click="cliSelect">查看</el-button>
                <!-- <el-button type="success" @click="cliSelect">同意</el-button>
                <el-button type="danger">驳回</el-button> -->
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane label="已驳回" name="third">
        <el-table
          :data="tableData"
          stripe
          style="width: 100%"
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" fixed />
          <el-table-column
            prop="date"
            label="登录名"
            width="150"
            align="center"
            fixed
          />
          <el-table-column
            prop="name"
            label="用户名"
            width="150"
            align="center"
            fixed
          />
          <el-table-column
            prop="address"
            label="统一社会信用代码"
            width="150"
            align="center"
          />
          <el-table-column
            prop="address"
            label="联系电话"
            width="150"
            align="center"
          />
          <el-table-column
            prop="address"
            label="密码"
            width="150"
            align="center"
          />
          <el-table-column
            prop="address"
            label="邮箱"
            width="150"
            align="center"
          />
          <el-table-column
            prop="address"
            label="联系地址"
            width="150"
            align="center"
          />
          <!-- <el-table-column prop="address" label="发布时间" align="center" /> -->
          <!-- <el-table-column label="状态" width="150" align="center">
            <template #default="scope">
              <el-tag class="ml-2" type="danger">已驳回</el-tag>
            </template>
          </el-table-column> -->
          <!-- <el-table-column label="操作" align="center" width="250">
            <template #default="scope">
              <div class="btn">
                <el-button type="primary" @click="cliSelect">同意</el-button>
                <el-button type="danger">驳回</el-button>
              </div>
            </template>
          </el-table-column> -->
        </el-table>
      </el-tab-pane>
    </el-tabs>

    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage4"
        v-model:page-size="pageSize4"
        :page-sizes="[100, 200, 300, 400]"
        :small="small"
        :disabled="disabled"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
  <!-- 新增 -->
  <el-dialog
    v-model="dialogVisible"
    title="用户基本信息"
    width="70%"
    :before-close="handleClose"
  >
    <div>
      <el-descriptions class="margin-top" :column="3" border>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <user />
              </el-icon>
              用户名
            </div>
          </template>
          张三
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <iphone />
              </el-icon>
              电话
            </div>
          </template>
          18100000000
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <location />
              </el-icon>
              地址
            </div>
          </template>
          江西省南昌市
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <tickets />
              </el-icon>
              邮箱
            </div>
          </template>
          45568889745455@qq.com
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon>
                <office-building />
              </el-icon>
              联系地址
            </div>
          </template>
          No.1188, Wuzhong Avenue, Wuzhong District, Suzhou, Jiangsu Province
        </el-descriptions-item>
      </el-descriptions>
    </div>
    <div>
      <img src="@/assets/images/1.jpg" alt="" srcset="" />
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button type="success" @click="dialogVisible = false"
          >同意</el-button
        >
        <el-button type="danger" @click="dialogVisible = false">驳回</el-button>
      </span>
    </template>
  </el-dialog>

  <!-- 测试弹框组件 -->
  <Layer :layer="layer" @getTableData="getTableData" v-if="layer.show" />
</template>

<script setup lang="ts">
import { ref, reactive, computed } from "vue";
import { ElMessageBox } from "element-plus";
import { useRoute, useRouter, RouteLocationMatched } from "vue-router";

// 引入 弹框组件
import Layer from "./layer.vue";
import type { LayerInterface } from "@/components/layer/index.vue";
import { Page } from "@/components/table/type";
import type { TabsPaneContext } from "element-plus";
import {
  Iphone,
  Location,
  OfficeBuilding,
  Tickets,
  User,
} from "@element-plus/icons-vue";

// 弹窗控制器
const layer: LayerInterface = reactive({
  show: false,
  title: "新增",
  showButton: true,
});

// 分页参数, 供table使用
const page: Page = reactive({
  index: 1,
  size: 20,
  total: 0,
});

const loading = ref(true);

// 获取表格数据
// params <init> Boolean ，默认为false，用于判断是否需要初始化分页
const getTableData = (init: boolean) => {
  loading.value = true;
  if (init) {
    page.index = 1;
  }
  let params = {
    page: page.index,
    pageSize: page.size,
    ...formInline,
  };
};

const reset = () => {
  layer.show = true;
};

// ===================================================================================

const router = useRouter();
const activeName = ref("second");
const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event);
};
// 数据
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
const multipleSelection = ref([]);
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
};

// const cliAdd = () => {
//   dialogVisible.value = true;
// };

// 新增模态框
const dialogVisible = ref(false);

const handleClose = (done: () => void) => {
  ElMessageBox.confirm("Are you sure to close this dialog?")
    .then(() => {
      done();
    })
    .catch(() => {
      // catch error
    });
};

const form = reactive({
  name: "",
  value: "",
  time: "",
  radio: "挂牌公告",
});
const options = [
  {
    value: "采矿权",
    label: "采矿权",
  },
  {
    value: "探矿权",
    label: "探矿权",
  },
];

// 分页
const currentPage4 = ref(4);
const pageSize4 = ref(100);
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
};
// 存储搜索用的数据
const formInline = reactive({
  radio1: "采矿权",
  radio2: "挂牌公告",
  user: "",
  region: "",
});

const onSubmit = () => {
  console.log("submit!");
};

const cliSelect = () => {
  dialogVisible.value = true;
  // router.push("/announcement/managementDetail");
};
</script>

<style lang="scss" scoped>
.el-card {
  margin: 15px;
}
.top-search {
  display: flex;
}
.btn-list {
  display: flex;
  margin: 10px 0;
}
.pagination {
  margin-top: 15px;
  display: flex;
  justify-content: flex-end;
}
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  .el-button {
    margin-right: 5px;
  }
  // justify-content: space-around;
}
.demo-tabs {
  width: 100%;
}
</style>
